<!--
<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入名称" v-model="taskName" size="small" style="width: 180px" class="mRight10" clearable> </el-input>
          <el-select v-model="bridgeName" placeholder="请选择桥梁" size="small" style="width: 140px" class="mRight10" clearable>
            <el-option v-for="item in bridgeOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
          <el-button type="primary" size="small" @click="queryForPage(1)"> 查询 </el-button>
        </div>
        <div class="insp-header-right">
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table
          :data="tableData"
          stripe
          :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }"
          max-height="660px"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
          <el-table-column property="bridgeName" label="所属桥梁" show-overflow-tooltip> </el-table-column>
          <el-table-column property="level" label="等级" show-overflow-tooltip></el-table-column>
          <el-table-column label="BCI评分" property="score" show-overflow-tooltip></el-table-column>
          <el-table-column prop="userName" label="上传人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="上传时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="修改">
                <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row.id)"> </el-button>
              </el-tooltip>
              <el-tooltip content="查看">
                <el-button type="text" icon="el-icon-circle-check" @click="handelTaskStatus(scope.row.id)"> </el-button>
              </el-tooltip>
              <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important" @click="handelDelete(scope.row.id)"> </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
          :page-size="pageSize"
          :total="recordsTotal"
        >
        </el-pagination>
      </div>
    </div>
    &lt;!&ndash; 新增/编辑定期检查&ndash;&gt;
    <AddRegular ref="addInspTaskChild" @closeAddInspTask="handleClose" :createType="4"></AddRegular>
  </div>
</template>
<script>
import AddRegular from './components/addRegular'
export default {
  data() {
    return {
      pageSize: 14,
      currentPage: 1,
      recordsTotal: 0,
      taskName: '',
      bridgeName: '',
      tableData: [],
      bridgeOptions: [],
      dialogDetailVisible: false,
      activeDetailName: 'basicInfo',
      detailGroup: [
        {
          name: '取消',
          type: 'border',
          funName: 'cancelDetail',
        },
      ],
    }
  },
  components: {
    AddRegular,
  },
  watch: {
    $route(to, from) {
      this.queryForPage(1)
    },
  },
  created() {
    this.queryBridgeList()
    this.queryForPage(1)
  },
  methods: {
    //查询桥梁
    queryBridgeList() {
      this.$api.bridge.AllTheBridges().then((response) => {
        console.log('桥梁列表')
        console.log(response)
        if (response.data.success) {
          this.bridgeOptions = response.data.data[0]
          console.log(this.bridgeOptions)
        }
      })
    },
    handleAdd() {
      this.$refs.addInspTaskChild.add()
    },
    handelDelete(val) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.insp.deleteRegular(val).then((response) => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: 'success',
                icon: 'success',
              })
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize)
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage)
            } else {
              this.$vs.notify({
                text: '删除失败',
                color: 'danger',
              })
            }
          })
        })
        .catch(() => {
          this.$vs.notify({
            text: '已取消删除',
            color: 'primary',
          })
        })
    },
    handelEdit(val) {
      this.$refs.addInspTaskChild.edit(val)
    },
    handelTaskStatus(val) {
      this.$refs.addInspTaskChild.detail(val)
    },
    queryForPage(pageIndex) {
      let _userInfo = JSON.parse(localStorage.getItem('userInfo'))
      if (pageIndex && pageIndex === 1) {
        this.currentPage = 1
      }
      const _params = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        data: {
          name: this.taskName,
          bridgeName: this.bridgeName,
        },
      }
      this.$api.insp.queryAll(_params).then((response) => {
        if (response.data.success) {
          this.tableData = response.data.data || []
          this.recordsTotal = response.data.recordsTotal
        }
      })
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage
      this.queryForPage()
    },
    handleClose() {
      this.queryForPage(1)
    },
    handleTabDetailClick(tab, event) {
      this.activeDetailName = tab.name
    },
  },
}
</script>
<style scoped lang="scss">
@import './insp.scss';

/deep/.el-table__header tr,
/deep/.el-table__header th {
  padding: 0;
  height: 44px;
}

/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
  font-size: 14px;
}

/deep/.el-table th {
  font-weight: 500;
  color: #fff;
}

/deep/.el-table td {
  font-weight: 400;
  color: #444;
  padding: 0;
  height: 44px;
  line-height: 44px;
}

/deep/.el-table&#45;&#45;striped .el-table__body tr.el-table__row&#45;&#45;striped td {
  background: #f1f5fc;
}

/deep/.el-table__expanded-cell {
  padding: 20px !important;
}

/deep/.el-button&#45;&#45;mini.insp-task-addBtn {
  padding: 6px;
  font-size: 18px;
  font-weight: bolder;
}

/deep/.insp-plan-detailTabs .el-tabs__header {
  padding: 0;
  margin: -20px 0 0;
  background: #fff;
}

/deep/.insp-plan-detailTabs .el-tabs__item {
  font-size: 14px;
  font-weight: 400;
  color: #999;
  position: relative;

  text-align: center;
}

/deep/.insp-plan-detailTabs .el-tabs__active-bar {
  width: 12px !important;
  background-color: #327bdc;

  left: 28px;
  margin-left: -6px;
}

/deep/.insp-plan-detailTabs .el-tabs__content {
  min-height: 250px;
}

/deep/.el-tabs__item.is-active {
  color: #327bdc;
}
</style>
-->

<!--<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入名称" v-model="taskName" size="small" style="width: 180px;" class="mRight10" clearable>
          </el-input>
          <el-select v-model="bridgeName" placeholder="请选择桥梁" size="small" style="width: 140px;" class="mRight10"
            clearable>
            <el-option v-for="item in bridgeOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" @click="queryForPage(1)">
            查询
          </el-button>
        </div>
        <div class="insp-header-right">
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table :data="tableData" stripe :header-cell-style="{
          background: '#8595B9',
          color: '#fff',
          height: '44px',
        }" max-height="660px">
           <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
          <el-table-column property="bridgeName" label="所属桥梁" show-overflow-tooltip> </el-table-column>
          <el-table-column property="level" label="等级" show-overflow-tooltip></el-table-column>
          <el-table-column label="BIC评分" property="score" show-overflow-tooltip></el-table-column>
          <el-table-column prop="userName" label="上传人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="上传时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="修改">
                <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row.id)">
                </el-button>
              </el-tooltip>
              <el-tooltip content="查看">
                <el-button type="text" icon="el-icon-circle-check" @click="handelTaskStatus(scope.row.id)">
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important;"
                  @click="handelDelete(scope.row.id)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
          :hide-on-single-page="false" @current-change="handlePageChange" :page-size="pageSize" :total="recordsTotal">
        </el-pagination>
      </div>

    </div>
    &lt;!&ndash; 新增/编辑定期检查&ndash;&gt;
    <AddRegular ref="addInspTaskChild" @closeAddInspTask="handleClose" :createType='4'></AddRegular>
  </div>
</template>
<script>
  import AddRegular from "./components/addRegular";
  export default {
    data() {
      return {
        pageSize: 14,
        currentPage: 1,
        recordsTotal: 0,
        taskName: '',
        bridgeName:'',
        tableData: [],
        bridgeOptions:[],
        dialogDetailVisible: false,
        activeDetailName: "basicInfo",
        detailGroup: [{
          name: "取消",
          type: "border",
          funName: "cancelDetail"
        }],
      };
    },
    components: {
      AddRegular
    },
    watch: {
      '$route'(to, from) {
        this.queryForPage(1);
      }
    },
    created() {
      this.queryBridgeList()
      this.queryForPage(1);
    },
    methods: {
      //查询桥梁
       queryBridgeList() {
        this.$api.bridge.AllTheBridges().then(response => {
          console.log('桥梁列表');
          console.log(response);
          if (response.data.success) {
            this.bridgeOptions = response.data.data[0];
            console.log(this.bridgeOptions);
          }
        });
      },
      handleAdd() {
        this.$refs.addInspTaskChild.add();
      },
      handelDelete(val) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.insp.deleteRegular(val).then(response => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: "success",
                icon: "success"
              })
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize);
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage);
            } else {
              this.$vs.notify({
                text: "删除失败",
                color: "danger"
              })
            }
          })
        }).catch(() => {
          this.$vs.notify({
            text: "已取消删除",
            color: "primary"
          })
        });
      },
      handelEdit(val) {
        this.$refs.addInspTaskChild.edit(val);
      },
      handelTaskStatus(val) {
        this.$refs.addInspTaskChild.detail(val);
      },
      queryForPage(pageIndex) {
        let _userInfo = JSON.parse(localStorage.getItem("userInfo"));
        if (pageIndex && pageIndex === 1) {
          this.currentPage = 1;
        }
        const _params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          data: {
            name: this.taskName,
            bridgeName: this.bridgeName
          }
        }
        this.$api.insp.queryAll(_params).then(response => {
          if (response.data.success) {
            this.tableData = response.data.data || [];
            this.recordsTotal = response.data.recordsTotal;
          }
        });
      },
      handlePageChange(currentPage) {
        this.currentPage = currentPage;
        this.queryForPage();
      },
      handleClose() {
        this.queryForPage(1);
      },
      handleTabDetailClick(tab, event) {
        this.activeDetailName = tab.name;
      },

    },
  };

</script>
<style scoped lang="scss">
  @import './insp.scss';

  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table th {
    font-weight: 500;
    color: #fff;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #444;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table&#45;&#45;striped .el-table__body tr.el-table__row&#45;&#45;striped td {
    background: #F1F5FC;
  }

  /deep/.el-table__expanded-cell {
    padding: 20px !important;
  }

  /deep/.el-button&#45;&#45;mini.insp-task-addBtn {
    padding: 6px;
    font-size: 18px;
    font-weight: bolder;
  }



  /deep/.insp-plan-detailTabs .el-tabs__header {
    padding: 0;
    margin: -20px 0 0;
    background: #fff;
  }

  /deep/.insp-plan-detailTabs .el-tabs__item {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    position: relative;

    text-align: center;
  }

  /deep/.insp-plan-detailTabs .el-tabs__active-bar {
    width: 12px !important;
    background-color: #327BDC;

    left: 28px;
    margin-left: -6px;
  }

  /deep/.insp-plan-detailTabs .el-tabs__content {
    min-height: 250px;
  }

  /deep/.el-tabs__item.is-active {
    color: #327BDC;
  }

</style>-->

<!--被我5.8号修改后的-->
<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入名称" v-model="taskName" size="small" style="width: 180px;" class="mRight10" clearable>
          </el-input>
          <el-select v-model="bridgeName" placeholder="请选择桥梁" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in bridgeOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" @click="queryForPage(1)">
            查询
          </el-button>
        </div>
        <div class="insp-header-right">
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table :data="tableData" stripe :header-cell-style="{
          background: '#8595B9',
          color: '#fff',
          height: '44px',
        }" max-height="660px">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
          <!--<el-table-column property="bridgeName" label="所属桥梁" show-overflow-tooltip> </el-table-column>-->
          <el-table-column property="level" label="等级" show-overflow-tooltip></el-table-column>
          <el-table-column label="BIC评分"  prop="score" show-overflow-tooltip></el-table-column>
          <!--<el-table-column label="BIC评分" property="score" show-overflow-tooltip></el-table-column>-->
          <el-table-column prop="userName" label="上传人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="上传时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="修改">
                <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row.id)">
                </el-button>
              </el-tooltip>
              <el-tooltip content="查看">
                <el-button type="text" icon="el-icon-circle-check" @click="handelTaskStatus(scope.row.id)">
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important;"
                           @click="handelDelete(scope.row.id)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
                       :hide-on-single-page="false" @current-change="handlePageChange" :page-size="pageSize" :total="recordsTotal">
        </el-pagination>
      </div>

    </div>
    <!-- 新增/编辑定期检查-->
    <AddRegular ref="addInspTaskChild" @closeAddInspTask="handleClose" :createType='4'></AddRegular>
  </div>
</template>
<script>
  import AddRegular from "./components/addRegular";
  export default {
    data() {
      return {
        tableData: [{
          index: '1',
          name: '滨江大桥',
          level: '合格',
          score: '96',
          userName: '四科新纪元1组',
          createTime: '2021-03-02 09:23:01',
          updateTime: '2021-03-06 11:33:41',
        },{
          index: '2',
          name: '城闸大桥',
          level: '合格',
          score: '87',
          userName: '四科新纪元2组',
          createTime: '2021-03-13 19:03:01',
          updateTime: '2021-03-16 11:23:01',
        },{
          index: '3',
          name: '通吕一号桥',
          level: '合格',
          score: '90',
          userName: '四科新纪元4组',
          createTime: '2021-04-02 08:13:11',
          updateTime: '2021-04-16 17:13:31',
        }],
        pageSize: 14,
        currentPage: 1,
        recordsTotal: 0,
        taskName: '',
        bridgeName:'',
        /* tableData: [],*/
        bridgeOptions:[],
        dialogDetailVisible: false,
        activeDetailName: "basicInfo",
        detailGroup: [{
          name: "取消",
          type: "border",
          funName: "cancelDetail"
        }],
      };
    },
    components: {
      AddRegular
    },
    watch: {
      '$route'(to, from) {
        this.queryForPage(1);
      }
    },
    created() {
      this.queryBridgeList()
      this.queryForPage(1);
    },
    methods: {
      //查询桥梁
      queryBridgeList() {
        this.$api.bridge.AllTheBridges().then(response => {
          console.log('桥梁列表');
          console.log(response);
          if (response.data.success) {
            this.bridgeOptions = response.data.data[0];
            console.log(this.bridgeOptions);
          }
        });
      },
      handleAdd() {
        this.$refs.addInspTaskChild.add();
      },
      handelDelete(val) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.insp.deleteRegular(val).then(response => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: "success",
                icon: "success"
              })
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize);
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage);
            } else {
              this.$vs.notify({
                text: "删除失败",
                color: "danger"
              })
            }
          })
        }).catch(() => {
          this.$vs.notify({
            text: "已取消删除",
            color: "primary"
          })
        });
      },
      handelEdit(val) {
        this.$refs.addInspTaskChild.edit(val);
      },
      handelTaskStatus(val) {
        this.$refs.addInspTaskChild.detail(val);
      },
      queryForPage(pageIndex) {
        let _userInfo = JSON.parse(localStorage.getItem("userInfo"));
        if (pageIndex && pageIndex === 1) {
          this.currentPage = 1;
        }
        const _params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          data: {
            name: this.taskName,
            bridgeName: this.bridgeName
          }
        }
        /*this.$api.insp.queryAll(_params).then(response => {
          if (response.data.success) {
            this.tableData = response.data.data || [];
            this.recordsTotal = response.data.recordsTotal;
          }
        });*/
      },
      handlePageChange(currentPage) {
        this.currentPage = currentPage;
        this.queryForPage();
      },
      handleClose() {
        this.queryForPage(1);
      },
      handleTabDetailClick(tab, event) {
        this.activeDetailName = tab.name;
      },

    },
  };

</script>
<style scoped lang="scss">
  @import './insp.scss';

  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table th {
    font-weight: 500;
    color: #fff;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #444;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F1F5FC;
  }

  /deep/.el-table__expanded-cell {
    padding: 20px !important;
  }

  /deep/.el-button--mini.insp-task-addBtn {
    padding: 6px;
    font-size: 18px;
    font-weight: bolder;
  }



  /deep/.insp-plan-detailTabs .el-tabs__header {
    padding: 0;
    margin: -20px 0 0;
    background: #fff;
  }

  /deep/.insp-plan-detailTabs .el-tabs__item {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    position: relative;

    text-align: center;
  }

  /deep/.insp-plan-detailTabs .el-tabs__active-bar {
    width: 12px !important;
    background-color: #327BDC;

    left: 28px;
    margin-left: -6px;
  }

  /deep/.insp-plan-detailTabs .el-tabs__content {
    min-height: 250px;
  }

  /deep/.el-tabs__item.is-active {
    color: #327BDC;
  }

</style>
